<!DOCTYPE HTML>
<html lang="en">
<head>
	<title>请登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>

	<link rel="stylesheet" href="./css/style.css" type="text/css" media="all" />
	<link href="./css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
	<!-- title -->
	<h1 class="none">
		猎狐人才资源服务有限公司
	</h1>

	<!-- content -->
	<div class="container-agille">
		<div class="formBox level-login">
			<div class="box boxShaddow"></div>
			<div class="box loginBox">
				<h3>登录</h3>
				<form class="form" action="./php/login.php" method="post">
					<div class="f_row-2">
						<input type="text" class="input-field num1" placeholder="账号" name="name" required>
					</div>
					<div class="f_row-2 last">
						<input type="password" name="pwd" placeholder="密码" class="input-field pwd1" required>
					</div>
					<a class="aaa" href="#"><input class="submit-w3" type="submit" value="登录"></a>
					<div class="f_link">
						<a href="" class="resetTag">忘记密码</a>
					</div>
				</form>
			</div>
			<div class="box forgetbox agile">
				<a href="#" class="back icon-back">
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					 viewBox="0 0 199.404 199.404" style="enable-background:new 0 0 199.404 199.404;" xml:space="preserve">
						<polygon points="199.404,81.529 74.742,81.529 127.987,28.285 99.701,0 0,99.702 99.701,199.404 127.987,171.119 74.742,117.876 
			  199.404,117.876 " />
					</svg>
				</a>
				<h3>重置密码</h3>
				<form class="form" action="#" method="post">
					<p>请输入你的注册手机</p>
					<div class="f_row last">
						<label>手机号</label>
						<input type="phone" name="phone" placeholder="Phone" class="input-field" required>
						<u></u>
					</div>
					<button class="btn button submit-w3">
						<span>确认</span>
					</button>
				</form>
			</div>
			<div class="box registerBox wthree" id="regist">
				<span class="reg_bg"></span>
				<h3>注册</h3>
				<form class="form" action="./php/register.php" method="post">
					<div class="f_row-2">
						<input type="text" id="phone" class="input-field" placeholder="手机号" name="name" required>
					</div>
					<div class="f_row-2 last">
						<input type="password" name="password" placeholder="密码" id="password1" class="input-field" required>
					</div>
					<div class="f_row-2 last">
						<input type="password" name="password" placeholder="确认密码" id="password2" class="input-field" required>
					</div>
					<input class="submit-w3" type="submit" value="注册">
				</form>
			</div>
			<a href="#" class="regTag icon-add">
				<i class="fa fa-repeat" aria-hidden="true"></i>

			</a>
		</div>
	</div>

	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="js/input-field.js"></script>
	<script src="js/ajax.js"></script>
	<script>
		window.onload = function () {
			document.getElementById("password1").onchange = validatePassword;
			document.getElementById("password2").onchange = validatePassword;
		}
		function validatePassword() {
			var pass2 = document.getElementById("password2").value;
			var pass1 = document.getElementById("password1").value;
			if (pass1 != pass2)
				document.getElementById("password2").setCustomValidity("两次密码不一致");
			else
				document.getElementById("password2").setCustomValidity('');
		}

		var pho=document.getElementById("phone");
		pho.onblur=function(){
			var phone=document.getElementById("phone").value;
		ajax({
				type: 'get',
				url: 'https://www.fastmock.site/mock/c7327ab6314451e5c1e086c21415702c/test/phone',
				data: {
					phone: phone
				},
				success: function (result) {
					console.log(result);
				},
				error: function (result) {
					console.log(result)
				}
			});
		}
		
	</script>
</body>
</html>